<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <PageTools :show-before="true">
          <template #before>
            <el-button size="small" type="primary" @click="addClientFn">添加客户</el-button>
          </template>
          <template #after>
            <el-row>
              <el-select v-model="selectAgents" class="el-btn">
                <el-option label="全部经纪" value="" />
                <el-option
                  v-for="item in agentsData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <el-input
                v-model="inputVal"
                placeholder="请输入关键字"
                style="width:300px;border:none"
              />
              <el-button @click="search">筛选</el-button>
            </el-row>
          </template>
        </PageTools>

        <el-tabs>
          <el-tab-pane>
            <template>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="image" label="图片" width="170">
                  <template slot-scope="{row}">
                    <img :src="row.image" alt="这是图片">
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="80" />
                <el-table-column prop="email" label="邮箱" width="150" />
                <el-table-column prop="phone" label="电话" width="150" />
                <el-table-column prop="agent.name" label="经纪" width="100" />
                <el-table-column prop="wechat" label="微信" width="150" />
                <el-table-column prop="desc" label="介绍" width="200" />
                <el-table-column label="操作" width="150">
                  <template v-slot="{row}">
                    <el-button size="small" type="primary" @click="editClientFn(row.id)">编辑</el-button>
                    <el-button size="small" type="danger" @click="delClientFn(row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-tab-pane>
        </el-tabs>

        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="total,prev,pager,next"
            :page-size="list._limit"
            :total="total"
            @current-change="changePage"
          />
          <!-- @size-change="pageSize" -->
        </el-row>
      </el-card>

      <!-- 新增 -->
      <AddClient ref="addClientData" :show-dialog.sync="showDialog" @updateEvent="getClientList" />

    </div>
  </div>
</template>

<script>
import { getClientList, delClient, getClientCount } from '@/api/client'
import AddClient from './component/add-client.vue'
// 调用经纪列表接口，获取经纪人
import { getAgentsList } from '@/api/agents'
export default {
  components: {
    AddClient
  },
  data() {
    return {
      tableData: [],
      list: {
        _limit: 2, // 该页显示的数量
        _start: 0, // 该页的起始位置
        name_contains: ''
      }, // 存放数据列表
      total: 0, // 客户列表的总数量
      inputVal: '', // 输入框内容
      showDialog: false, // 弹窗
      addClientData: [],
      clientId: '',
      val: this._limit,
      bool: false, // 封面是否显示
      agentsData: [],
      currentPage: 1,
      selectAgents: ''
    }
  },
  // 计算属性
  computed: {
    pageConfig() {
      // 设定每页长度
      const pageSize = 2
      return {
        _limit: pageSize,
        _start: (this.currentPage - 1) * pageSize
      }
    }
  },
  created() {
    // 获取客户列表
    this.getClientList()
    // 获取客户总数据
    // this.getClientCountFn()

    // 获取经纪列表信息
    this.getAgentsList()
  },
  methods: {
    // 编辑客户信息---数据回显
    async  editClientFn(id) {
      console.log(id)
      this.showDialog = true
      // 子
      this.$refs.addClientData.getClientItem(id)
      // console.log(555, this.formData)
      // this.formData = { ...data, agent: data.agent.name }
      // setTimeout(() => {
      // this.$refs.imgupload.fileList = [{ url: data.image }]
      // }, 2000)
      this.bool = true
    },
    // 新增客户
    async addClientFn() {
      this.showDialog = true
      console.log(116)
    },
    // 删除客户
    delClientFn(id) {
      this.$confirm('是否确定删除？', '删除', {
        type: 'warning'
      }).then(async() => {
        // 调用删除接口
        await delClient(id)
        // 刷新列表
        this.getClientList()
        this.$message.success('删除成功')
      }).catch(err => {
        this.$message.info('已取消删除')
        console.log('删除有误', err)
      })
    },
    // 获取数据
    async getClientList() {
      // if (this.tableData.length === 1 && this.list._start >= this.list._limit) {
      //   this.list._start -= this.list._limit
      // }
      const res = await getClientList({
        ...this.pageConfig,
        name_contains: this.inputVal || null,
        agent: this.selectAgents.agent || null
      })
      // 保存员工 和客户数量
      this.tableData = res
      this.total = await getClientCount({
        name_contains: this.inputVal || null,
        agent: this.selectAgents.agent || null
      })
      console.log('客户列表', res)
      // console.log('客户数组总数量', this.total)
    },

    // // 获取数据总数
    // async getClientCountFn() {
    //   const res = await getClientCount(this.list)
    //   this.total = res
    // },
    // 分页
    changePage(newPage) {
      // 当前页--下标
      // this.list._start = newPage * this.list._limit
      this.currentPage = newPage
      this.getClientList()
      // this.getClientCountFn()
    },
    // 模糊搜索
    search() {
      this.currentPage = 1
      this.getClientList()
    },
    // pageSize(val) {
    //   // 页面数
    //   this.list._limit = val
    //   this.getClientList()
    //   this.getClientCountFn()
    // },
    // 经纪列表
    async getAgentsList() {
      this.agentsData = await getAgentsList({
        _limit: 999,
        _start: 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  .el-btn{
    width: 120px;
    font-size: 14px;
      .el-icon--right{
    margin-left: 15px;
  }
  }

}
img{
  width: 150px;
}

</style>
